<template>
	<view class="refundDetails_page" >
		<!-- <view class="refundDetails_card_header">
			<text class="header_txt">交易关闭</text>
			<text>退款成功</text>
		</view> -->
		<view class="refundDetails_card_header">
			<text class="header_txt">售后中</text>
			<text>售后期间如有问题请与师傅沟通</text>
		</view>
		<view class="refundDetails_card_body">
			<view class="body_list">
				<text class="list_title">雇佣师傅</text>
				<text class="list_content">王晶</text>
			</view>
			<view class="body_list">
				<text>手机号码</text>
				<view class="call_woker">
					<image src="/static/img_tel.png"></image>
					<text>联系师傅</text>
				</view>
			</view>
			<view class="body_list">
				<text class="list_title">施工时间</text>
				<text class="list_content">9月5日 5:00 至 6:00</text>
			</view>
			<view class="body_list">
				<text class="list_title">工种</text>
				<text class="list_content">水电</text>
			</view>
			<view class="body_list">
				<text class="list_title">售后</text>
				<text class="list_content">无售后</text>
			</view>
		</view>
		<view class="refundDetails_card_money">
			<view class="money_list">
				<text class="money_title">支付金额</text>
				<text class="money_content">￥202</text>
			</view>
			<view class="money_list">
				<text class="money_title">优惠卷</text>
				<text class="money_content">-￥50</text>
			</view>
			<view class="money_list">
				<text class="money_title">准时达</text>
				<text class="money_content">￥0.2</text>
			</view>
			<view class="money_list">
				<text class="money_title">地址</text>
				<text class="money_content_adress">江苏省徐州市鼓楼区和兴广场家乐福1号楼2号门</text>
			</view>
		</view>
		<view class="refundDetails_card_info">
			<view class="info_list">
				<text class="info_title">订单信息</text>
				<text class="info_content">5674445645645</text>
			</view>
			<view class="info_list">
				<text class="info_title">支付方式</text>
				<text class="info_content">微信</text>
			</view>
			<view class="info_list">
				<text class="info_title">下单时间</text>
				<text class="info_content">2020-19-12 11:23</text>
			</view>
		</view>
		<view class="refundDetails_card_btn">
			<view class="btn_style" @tap='applyOfRefund'>
				<text>申请退款</text>
			</view>
			<view class="btn_style_now">
				<text>售后中</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.swiperHeight = res.windowHeight
				}
			})
		},
		methods:{
			applyOfRefund(){
				uni.navigateTo({
					url:'./apply/apply'
				})
			}
		}
	}
</script>

<style lang="scss">
.refundDetails_page{
	width: 100%;
	background-color: #f4f8fb;
	padding-bottom: 28rpx;
}
.refundDetails_card_header{
	width: 100%;
	height: 247rpx;
	background-color: #FFFFFF;
	padding: 42rpx 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text{
		color: #222222;
		font-size: 28rpx;
	}
	.header_txt{
		font-size: 50rpx;
		margin-bottom: 44rpx;
	}
}
.refundDetails_card_body{
	width: 100%;
	height: 378rpx;
	background-color: #FFFFFF;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0 30rpx;
	.body_list{
		display: flex;
		justify-content: space-between;
		.list_title{
			font-size: 28rpx;
		}
		.list_content{
			font-size: 26rpx;
		}
		.call_woker{
			display: flex;
			align-items: center;
			image{
				width: 25rpx;
				height: 25rpx;
				margin-right: 7rpx;
			}
			text{
				color: #62A4FB;
				font-size: 26rpx;
			}
		}
	}
}
.refundDetails_card_money{
	width: 100%;
	height: 347rpx;
	background-color: #FFFFFF;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0 30rpx;
	.money_list{
		display: flex;
		justify-content: space-between;
		.money_title{
			font-size: 28rpx;
		}
		.money_content{
			font-size: 26rpx;
			color: #FF0000;
		}
		.money_content_adress{
			color: #222222;
			font-size: 26rpx;
			display: inline-block;
			width: 415rpx;
			letter-spacing: 1rpx;
		}
	}
}
.refundDetails_card_info{
	width: 100%;
	height: 253rpx;
	background-color: #FFFFFF;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0 30rpx;
	.info_list{
		display: flex;
		justify-content: space-between;
		.info_title{
			font-size: 28rpx;
		}
		.info_content{
			font-size: 26rpx;
		}
	}
}
.refundDetails_card_btn{
	width: 100%;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 26rpx;
	.btn_style,.btn_style_now{
		width: 335rpx;
		height: 81rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background-color: #62A4FB;
		border-radius: 10rpx;
	}
	.btn_style_now{
		background-color: #cccccc;
	}
}
</style>
